<script setup lang="ts">
import { useRoute } from "vue-router";
import api from "@/api";
import { computed, onMounted, ref, watchEffect } from "vue";
import message from "@arco-design/web-vue/es/message";
import { LoginUserStore } from "@/store/user";
import { APP_SCORING_STRATEGY_MAP, APP_TYPE_MAP } from "../../constant/app";
import { dayjs } from "@arco-design/web-vue/es/_utils/date";
import ShareModal from "@/components/ShareModal.vue";

//定义数据
//组件的传递参数
interface Props {
  id: string;
}

//定义App数据类型
// eslint-disable-next-line no-undef
let data = ref<API.AppVO>({});

//定义组件传递值
// eslint-disable-next-line no-undef
const props = withDefaults(defineProps<Props>(), {
  id: () => {
    return "";
  },
});

//获取登录用户信息
// 获取登录用户
const loginUserStore = LoginUserStore();
let loginUserId = loginUserStore.loginUser?.id;
// 是否为本人创建
const isMy = computed(() => {
  return loginUserId && loginUserId === data.value.userId;
});

//加载数据
const loadData = async () => {
  console.log("进入加载数据");
  if (!props.id) {
    console.log("数据加载错误，没有传递id");
    return;
  }
  const res = await api.appController.getAppVoByIdUsingGet({
    id: props.id as any,
  });
  if (res.data.code === 0 && res.data.data) {
    data.value = res.data.data;
  } else {
    message.error("获取数据失败，" + res.data.message);
  }
};

//监听数据且触发数据加载
watchEffect(() => {
  loadData();
});

//根据路由信息的应用id获取应用信息

//获取当前登录用户信息，便于权限控制按钮展示

// 分享弹窗引用
const shareModalRef = ref();
// 分享链接
const shareLink = `${window.location.protocol}//${window.location.host}/app/detail/${props.id}`;
// 分享
const doShare = (e: Event) => {
  console.log("分享");
  if (shareModalRef.value) {
    shareModalRef.value.openModal();
  }
  e.stopPropagation();
};


</script>

<template>
  <div id="app-detail">

    <!--  定制卡片展示信息-->
    <a-card class="content" style="width: 1024px">
      <!--  利用栅格布局左自适应，右固定宽度展示应用图片-->
      <a-row class="content-message" style="margin-bottom: 16px">
        <!--  将获取的应用信息逐条展示在左侧区域-->
        <a-col class="content-wrapper" flex="auto">
          <h2>{{ data.appName }}</h2>
          <p>{{ data.appDesc }}</p>
          <p>应用类型：{{ APP_TYPE_MAP[data?.appType] }}</p>
          <p>评分策略：{{ APP_SCORING_STRATEGY_MAP[data.scoringStrategy] }}</p>
          <p>
            <a-space>
              作者：
              <div :style="{ display: 'flex', alignItems: 'center' }">
                <a-avatar
                  :size="24"
                  :image-url="data.user?.userAvatar"
                  :style="{ marginRight: '8px' }"
                />
                <a-typography-text
                  >{{ data.user?.userName ?? "无名" }}
                </a-typography-text>
              </div>
            </a-space>
          </p>
          <p>
            创建时间：{{ dayjs(data.createTime).format("YYYY-MM-DD HH:mm:ss") }}
          </p>
          <!--  添加多个按钮-->
          <a-space size="medium">
            <a-button type="primary" :href="`/answer/do/${id}`"
              >开始答题
            </a-button>
            <a-button @click="doShare">分享应用</a-button>
            <!--  权限按钮利用v-if语法来选择性展示-->
            <a-button v-if="isMy" :href="`/add/question/${id}`"
              >设置题目
            </a-button>
            <a-button v-if="isMy" :href="`/add/scoring_result/${id}`"
              >设置评分
            </a-button>
            <a-button v-if="isMy" :href="`/add/app/${id}`">修改应用</a-button>
          </a-space>
        </a-col>
        <a-col flex="320px">
          <a-image :src="data?.appIcon" width="100%"></a-image>
        </a-col>
      </a-row>
    </a-card>
    <ShareModal ref="shareModalRef" :link="shareLink" />
  </div>
</template>

<style scoped>
.content {
  margin: 0 auto;
}

.content-wrapper {
  margin: auto 0;
  margin-left: 50px;
}

.content-wrapper > * {
  margin-bottom: 34px;
}
</style>
